<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查询页面</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<!-- 提示错误 ${括号里是错误信息的名称}-->
<h1 th:text="${error}"></h1>


<a  th:href="@{/student/add_index}">新增</a>
<button id="newStudent">新增学生</button>
<!-- <a href="http://localhost:8080/student/add_index">新增</a> -->
<button>删除</button>

<table border="1">
<tr>
<th>全选</td>
<th>id</td>
<th>姓名</td>
<th>学号</td>
<th>性别</td>
<th>操作</th>
</tr>
<tbody id="student_table">
</tbody>
<!-- <!-- 将遍历结果 以list形式展现 -->
<!-- <tr th:each="student : ${students}"> -->
<!--   <td><input type="checkbox" /></td> -->
<!--   <td th:text="${student.id}"></td> -->
<!--   <td th:text="${student.name}"></td> -->
<!--   <td th:text="${student.number}"></td> -->
<!--   <td th:text="${student.sex}? '男' : '女'">yes</td> -->

<!--   <td> -->
<!--   <a th:href="@{'/student/update_index?id='+${student.id}}">修改</a> -->
<!--   <a th:href="@{'/student/delete?id='+${student.id}}">删除</a></td> -->
<!--   <a th:href="@{'http://localhost:8080/student/delete?id='+${student.id}}"> thymeleaf中url的输入方式 -->

<!-- </tr> -->

</table>
<script >
  //设置表格成斑马线状
 $("#newStudent").click(function(){
	 var name = prompt("请输入你的名字");
	 var number = prompt("请输入你的学号");
	 var sex = prompt("请输入你的性别");
	 var data = {'name':name, 'number':number, 'sex': sex};
	 $.post("/student/add", data, function(data,status){
		 select_ajax();
	 });
 });
 //首先，给id为newStudent的button标签设置一个Ajax，点击以后会新添一行数据，使用var是在点击以后会议alert弹出框的形式进行输入
 function select_ajax(){
	 $.get("/student/select_ajax", {}, function(students){
		 $("#student_table").html("");
		 for(var i = 0; i < students.length; i++){
			 $("#student_table").append("<tr><td>" + students[i].name + "</td><td>"+students[i].number +"</td><td>"+students[i].sex+"</td></tr>");
		 } 
// 		 $("tr:even").css('background-color','red');
// 		 $("tr:first").css('background-color','green');
// 		 $("tr:last").css('background-color','black');
		 $("button:eq('1')").html("哈哈");
	 });
 }
 select_ajax();//调用 方法select_ajax()
//顺序是，刷新页面使用一次select_ajax()，然后点击button后，在post时使用第二次select_ajax()，清空当前页面数据，并且新增一条数据
</script>
</body>
</html>